<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="container">
        <img src="./image/pic1.png" class="img">
        <img src="./image/pic2.png" class="img">
        <img src="./image/pic3.png" class="img">
        <img src="./image/pic4.png" class="img">
        <img src="./image/pic5.png" class="img">
        <img src="./image/pic6.png" class="img">
    </div>

    <script>
        document.querySelectorAll('.img').forEach((box, index, boxes) => {
            box.addEventListener(`mouseover`, () => {
                boxes.forEach((b, i) => {
                    let className = i < index ? 'prev' : i === index ? 'hovered' : 'next';
                    b.classList.remove('prev', 'next', 'hovered');
                    b.classList.add(className);
                });
            });
            box.addEventListener(`mouseleave`, () => {
                boxes.forEach((b) = b.classList.remove('prev', 'next', 'hovered'))
            });
        });
    </script>
</body>

</html>